<template>
  <!-- //外层在包含一个div -->
  <div>
      <el-col :span="4">
        <el-menu
        :default-active=activeIndex
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"  
        router
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        style="padding-left: 10px;">
        <el-menu-item-group>
          <el-menu-item style="margin-left: 45px;">
            <el-avatar :size="40" :src="require('../assets/123.png')"></el-avatar>
          </el-menu-item>
          <el-menu-item style="height: 30px;line-height: 10px;padding-left: 30px;">
            <span>智慧社区管理系统</span>
          </el-menu-item>
        </el-menu-item-group>
    
        <el-menu-item index="/index">
          <i class="el-icon-menu"></i>
          <span slot="title">首页</span>
        </el-menu-item>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>设备保修</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/index/upkeep">请求列表</el-menu-item>
            <!-- <el-menu-item index="1-2">选项3</el-menu-item> -->
            <el-menu-item index="/index/staffinfolist">维修员工处理</el-menu-item>
            <!-- <el-menu-item index="/index/newmaintenance">新建请求</el-menu-item> -->
          </el-menu-item-group>
    
        </el-submenu>
        <el-menu-item index="/index/userlist">
          <i class="el-icon-menu"></i>
          <span slot="title">用户设置</span>
        </el-menu-item>
        <el-menu-item index="/index/staffinfo">
          <i class="el-icon-menu"></i>
          <span slot="title">员工设置</span>
        </el-menu-item>
        <!-- <el-menu-item index="5">
          <i class="el-icon-menu"></i>
          <span slot="title">投诉处理</span>
        </el-menu-item> -->
        <el-menu-item index="/index/notice">
          <i class="el-icon-menu"></i>
          <span slot="title">公告</span>
        </el-menu-item>
       
     
      </el-menu>
 
      </el-col>

      <el-col :span="20">
        <div>
          <!-- 顶栏模块 -->
               <div class="navlist">
              <div style="text-align: center">
                hi!{{name}} 欢迎登录
              </div>
           
              <div class="navright" >
            <div>
              
            
             
              <el-popover
              placement="bottom"
              width="150"
              trigger="hover">
            <div style="text-align: center;">
             
             
           <div style="margin-bottom: 10px;" @click="modifyinfo"> <el-link>修改信息</el-link></div>
           <div @click="exitlogin"> <el-link>退出</el-link></div>
            </div>

             <!--slot="reference"带有这个属性 才是页面上展示的  -->
             <el-avatar :size="30" :src="require('../assets/123.png')" slot="reference"></el-avatar>
            </el-popover>
 
            </div>
               <div style="margin-left:6px;">{{name}}</div>
              </div>  
           
               </div>
       
      <!-- 主题模块 -->
       <div class="bg" style="padding-left: 20px;">
       <router-view/>
      </div>
        </div>


      </el-col>
  



  </div>
</template>
<script>
  //固定格式 每个组件都得导出
export default{
  data(){
    return{
      activeIndex:this.$route.path,
      name:''
    }
   
  },
  created(){

    this.name=JSON.parse(localStorage.getItem('userInfo')).username
    console.log("789")
  },
  methods:{
    exitlogin(){
     
      this.$router.replace("/loginuser")
      //移除缓存
      localStorage.removeItem('userInfo')
     
    },
    modifyinfo(){
      console.log("修改信息")
    },
   
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }


  },


}
</script>
<style lang="less" scoped>


.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 100vh;

} 





.navlist{
display: flex;
justify-content:space-between;
height: 50px;
background-color:#ffffff;
padding-left: 30px;
padding-right: 30px;
align-items: center;
font-size:small;
}
.navright{
display: flex;
justify-content: end; 
 align-items: center;
}

</style>